<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在线Api测试</title>
    <link rel="apple-touch-icon-precomposed" href="./images/favicon.ico"/>
    <link rel="shortcut icon" href="./images/favicon.ico"/>
    
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="stylesheet" href="./jsoneditor/jsoneditor.css" />

    <script type="text/javascript" src="./js/jquery.min.js"></script>

    <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./typeahead/typeahead.bundle.js"></script>
    <script type="text/javascript" src="./jsoneditor/jsoneditor.js"></script>
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <div  class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only"></span>
                    <span class="glyphicon glyphicon-menu-down"></span>
                </div>
                <a class="navbar-brand" href="javascript:;">在线Api测试</a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a  data-toggle="modal" data-target="#about">关于</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container">
        <div class="input-group input-group-lg">
            <div class="input-group-btn">
               
                <button id="btn_method" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                    <span id="txt_method">POST</span> 
                    <span class="caret"></span>
                </button>
                <ul id="method_menu" class="dropdown-menu" role="menu">
                    <li><a href="javascript:;" class="method">GET</a></li>
                    <li><a href="javascript:;" class="method">POST</a></li>
                </ul>
            </div>

            <input id="txt_url" type="text" data-provide="typeahead" class="form-control typeahead" placeholder="http://online.test.api">
            <span class="input-group-btn">
                <button id="btn_send" class="btn btn-primary" type="button">
                    <span class="glyphicon glyphicon-arrow-right"></span>
                </button>
            </span>
        </div>
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <h3>请求信息</h3>
                <div id="request">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"  id="btn_request_body">
                            <a href="#txt_request_body" data-toggle="tab">Body</a>
                        </li>
                        <li role="presentation" id="btn_request_header">
                            <a href="#txt_request_header"  data-toggle="tab">Header</a>
                        </li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-expanded="false">
                                <span id="txt_content_type">Content-Type</span> 
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="javascript:;" class="content_type">application/json</a></li>
                                <li><a href="javascript:;" class="content_type">multipart/form-data</a></li>
                                <li><a href="javascript:;" class="content_type">application/x-www-form-urlencoded</a></li>
                            </ul>
                        </li>
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;" aria-expanded="false">
                                <span id="data_type">json</span> 
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="javascript:;" class="data_type">json</a></li>
                                <li><a href="javascript:;" class="data_type">text</a></li>
                                <li><a href="javascript:;" class="data_type">jsonp</a></li>
                                <li><a href="javascript:;" class="data_type">script</a></li>
                                <li><a href="javascript:;" class="data_type">xml</a></li>
                                <li><a href="javascript:;" class="data_type">html</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="txt_request_body" role="tabpanel" class="tab-pane  active request_text"></div>
                        <div id="txt_request_header" role="tabpanel" class="tab-pane  request_text"></div>
                    </div>
                    
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <h3>响应信息</h3>
                <div id="response">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active" id="btn_response_body">
                            <a href="#txt_response_body" data-toggle="tab">Body</a>
                        </li>
                        <li role="presentation" id="btn_response_header">
                            <a href="#txt_response_header" data-toggle="tab">Header</a>
                        </li>
                        <li role="presentation" id="btn_response_setcookie">
                            <a href="#txt_response_cookie" data-toggle="tab">Set-Cookie</a>
                        </li>
                        <li role="presentation" class="pull-right">
                            <a id="txt_status" href="javascript:;" class="text-primary" title="Status"></a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <pre id="txt_response_body" role="tabpanel"  class="tab-pane active response_text prettyprint prettyprinted"></pre>
                        <pre id="txt_response_header" role="tabpanel"  class="tab-pane response_text prettyprint prettyprinted"></pre>
                        <pre id="txt_response_cookie" role="tabpanel"  class="tab-pane response_text prettyprint prettyprinted"></pre>
                    </div>
                </div>
            </div>
        </div>
        
        
    </div>
    <div class="footer">
        <div class="text-center">Design By © 2017-2018 it浪子</div>
    </div>
    <div class="modal fade" tabindex="-1" id="about" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">关于在线Api测试</h4>
                </div>
                <div class="modal-body about">
                    <p>
                        Api测试工具有很多,甚至有些IDE就直接集成了;<span class="text-primary">在线Api测试</span> 只是一个工作之余制作的一个小工具,旨在轻便、简单、可视化为目的,无需插件和任何IDE,仅仅是一个html5网页,打开即用,非常方便。</p>
                    <p>
                        <span class="text-primary">在线Api测试</span> 主要方便后端人员测试接口使用;针对POST请求、后台需要接受JSON参数（比如spring mvc中使用了注解@RequestBody）、需要添加特殊的header 时候这个工具很好使用。
                    </p>
                    <p>
                        由于是Ajax请求说以不能处理cookie,若想处理cookie需要后台配合,所以cookie不在<span class="text-primary">在线Api测试</span> 的考虑范围之内。
                    </p>
                    <p>
                        <span class="text-primary">在线Api测试</span> 集成了自动提示功能和在线JSON编辑功能,开发测试更加高效、快捷。
                    </p>
                    <p>
                        注意,<span class="text-primary">在线Api测试</span> 不是为了测试浏览器的兼容而设计的,所以不保证100%兼容所有浏览器,建议采用最新的<a class="text-info" href="http://www.google.cn/chrome/browser/desktop/" target="_blank">Chrome</a>、<a  class="text-info" href="http://www.firefox.com.cn/" target=_blank>Firefox</a>等浏览器,赶紧放弃万恶的IE吧！
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="./js/testapi.js"></script>

</html>